<template>
	<view class="tabs_box">
		<view style="white-space: nowrap;" v-if='type == 1' class="uni-tab-row">
		  <view  class="uni-tab-item"  v-for="(tab,index) in tabList" :key="index" :id="tab.id"  
		    :data-id="tab.id" @click="ontabtap">
		    <text class="uni-tab-item-title"  :class="{'uni-tab-item-title-active': styleType == 1 && active== tab.id,'uni-tab-item-title-active2': styleType == 2 && active== tab.id}" >{{tab.name}}</text>
		  </view>
		</view>
		<scroll-view scroll-x="true" enable-flex="true">
		<view style="white-space: nowrap;" class="uni-tab-row3"  v-if='type == 2'>
		  <view  class="uni-tab-item"  v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id"   :ref="'tabitem'+ tab.id"
			:data-id="tab.id"  @click="ontabtap">
		   <text class="uni-tab-item-title"   :class="active== tab.id ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
		  </view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props:{
			tabList:{
				type: Array,
				default () {
					return [];
				}	
			},
			type:{
				type: [Number,String],
				default: 1
			},
			styleType:{
				type: [Number,String],
				default: 1
			}
		},
		name:"tabs",
		data() {
			return {
				active:0,
			};
		},
		methods:{
			ontabtap(e) {
				let x = e.target.dataset.id || e.currentTarget.dataset.id;
				if(x == this.active) return 
				this.active = x
				this.$emit('change',x)
				
				console.log(this.active,'分类啊啊');
			},
		},
		onReady(){
			// this.$refs.tabs.active = 1
		},
	}
</script>

<style lang="scss" scoped>
.uni-tab-row{
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 .uni-tab-item {
		 flex:1;
		 text-align: center;
		 
	 }
}
.uni-tab-row3{
	overflow-x: auto;
	 display: flex;
	 &::-webkit-scrollbar {
	 		 display: none !important;
	 		  width: 0;
	 		  height: 0;
	 		  color: transparent;
	 		}
	.uni-tab-item {
		position: relative;
		display: inline-block;
	    // padding:0 30rpx ;
		padding-right:22rpx ;
		box-sizing: border-box;
		
		
	  }
}
  .uni-tab-item-title {
  	font-size: 28rpx;
  	color:#999;
	
	min-width: 120rpx;
	padding: 0 20rpx;
	display: inline-block;
	text-align: center;
	line-height: 60rpx;
	font-size: 25rpx;
	border-radius: 32rpx;
	margin: 0 0 0 20rpx;
	background-color: #e4e4e4;
	}
  .uni-tab-item-title-active {
	  // font-weight: 700;
	  // position: relative;
	  // font-size: 36rpx;
	  // color:$theme;
	  
	  color: #f4f4f4!important;
	  // background: #393939!important
	  background-image: linear-gradient(rgb(255,155,3), rgb(252,183,78))!important;
	      box-shadow: 0px 3px 7px 0px #ff9e0c;
  }
  .uni-tab-item-title-active2{
	  font-weight: 700;
	  position: relative;
	  font-size: 36rpx;
	  position: relative;
		&::before {
		      position: absolute;
		      content: '';
		      left: 50%;
					/* #ifdef APP-PLUS */
					bottom: -28rpx;
					/* #endif */
					/* #ifndef APP-PLUS*/
					bottom: -28rpx;
					/* #endif */
				    transform: translateX(-50%);
					width: 72rpx;
					height: 4rpx;
					background-color: $theme;
		   }
  }
  .tabs_box{
	box-sizing: border-box;
	width: 100%;
	height: 102rpx;
	line-height: 102rpx;
	font-size: 30rpx;
	color:#19191B;
	box-sizing: border-box;
  }
  .scroll::-webkit-scrollbar {
   display: none !important;
    width: 0;
    height: 0;
    color: transparent;
  }
  ::-webkit-scrollbar {
  		width: 0;
  		height: 0;
  		background-color: transparent;
  	} 
</style>
